<template>
  <div class="d_main not d_main_auto">
    <div class="machinePlanList list list_3">
      <div v-for="item in planList" :key="item.equipmentNo" class="item" @click="handleFixm(item)">
        <div class="cTitle">
          <h3>{{ item.equipmentName }}</h3>
        </div>
        <div class="type"><i class="el-icon-printer mr10" />{{ item.equipmentType }}</div>
        <dl>
          <dt>待开始任务</dt>
          <dd>{{ item.waitBeginTaskCount }}</dd>
        </dl>
        <dl>
          <dt>进行中任务</dt>
          <dd>{{ item.inProduceTaskCount }}</dd>
        </dl>
        <dl>
          <dt>已完成任务</dt>
          <dd>{{ item.finishedTaskCount }}</dd>
        </dl>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Materiel',
  data() {
    return {
      planList: []
    }
  },
  created() {
    this.loading = this.$loading({
      lock: true,
      text: '数据加载中',
      spinner: 'el-icon-loading',
      fullscreen: true,
      background: 'rgba(0, 0, 0, 0.7)'
    })
    this.getPlanList()
  },

  mounted() {},

  methods: {
    //
    handleFixm(item) {
      this.$router.push({
        path: '/production/productionSupplement', // 跳转的路径
        query: {
          equipmentNo: item.equipmentNo,
          type:item.equipmentType
        }
      })
    },
    //
    getPlanList() {
      this.$api.system
        .GetProduceCraftTaskStatDataForEquipment({machineDepartment:1})
        .then((res) => {
          this.planList = res
          this.loading.close()
        })
        .catch(() => {
          this.loading.close()
        })
    }
  }
}
</script>
<style lang="scss" scoped>
.machinePlanList {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: -8px;
  .item {
    position: relative;
    background: #ffffff;
    border-radius: 4px;
    border: 1px solid #e6e6e6;
    padding: 16px;
    &:hover{
      border-color: #ddd;
      z-index: 2;
      box-shadow: 0 4px 16px 0 rgba(0,0,0,0.1);
    }
    .type {
      background: #F5F6F9;
      border-radius: 4px;
      border: 1px solid #E6E6E6;
      padding: 10px;
      margin-bottom: 16px;
    }
    dl{
      display: flex;
      justify-content: space-between;
      &:not(:last-child){
        margin-bottom:16px;
      }
      dt{}
      dd{
        color: #999aaa;
      }
    }
  }
}
</style>
<style lang="scss">
.el-loading-mask {
  top: 0;
}
</style>
